<template>
	<view class="">
		<image src="../../static/images/b662a6497d9753e48c7ad6965063b5c 1.png" mode="" class="logo"></image>
		<text class="title">收银系统</text>
		<view class="cont">
			<view class="contList">
				<image src="../../static/images/account 1.png" mode="" class="listPic"></image>
				<input type="text" placeholder="请输入用户名" class="input" v-model="params.username">
			</view>
			<view class="contList">
				<image src="../../static/images/账号安全 1.png" mode="" class="listPic"></image>
				<input type="password" placeholder="请输入密码" class="input" v-model="params.password">
			</view>
			<view class="contList">
				<image src="../../static/images/验证码 1.png" mode="" class="listPic"></image>
				<view class="listCont">
					<input type="text" class="input1" placeholder="验证码" v-model="params.value">
					<view class="code" @click="code">
						<!-- <jp-verification-literalness :contentHeight="45" class="codeCont"></jp-verification-literalness> -->
						<!-- <text>获取验证码</text> -->
						<image :src="params.images" mode=""></image>
					</view>
				</view>
			</view>
		</view>

		<button class="btn" @click="login">登录</button>
	</view>
</template>
<script>
	// import {encrypt} from '../../utils/crypto.js';
	export default {
		data() {
			return {
				params: {
					password: '',
					username: '',
					value: '',
					images: '',
					uuid:''
				}
			}
		},
		methods: {
			login() {
				this.$requestPostMethod(this.$serverData.baseUrl + `/auth/shouYinlogin`, {
					username: this.params.username,
					password: this.params.password,
					code:this.params.value,
					uuid:this.params.uuid
				}).then(res => {
					console.log(res.token);
					uni.setStorageSync('Authorization',res.token)
					uni.setStorageSync('username',this.params.username)
					if(res.user.username == this.params.username ) {
						uni.switchTab({
							url:'/pages/orderList/orderList'
						})
					}
				});
			},
			code() {
				this.$requestGetMethod(this.$serverData.baseUrl + `/auth/code`, {}).then(data => {
					console.log(data.img);
					this.params.images = data.img;
				});
			}
		},
		onLoad() {
			this.$requestGetMethod(this.$serverData.baseUrl + `/auth/code`, {}).then(data => {
				console.log(data);
				// console.log(data.uuid);
				this.params.images = data.img;
				this.params.uuid = data.uuid
			});
		}
	}
</script>

<style scoped lang="scss">
	.logo {
		display: block;
		width: 400rpx;
		height: 400rpx;
		margin: 0 auto;
	}

	.title {
		display: block;
		margin: 0 auto 50rpx;
		color: #FE0000;
		text-align: center;
		font-family: PingFang SC;
		font-size: 50rpx;
		font-style: normal;
		line-height: normal;
	}

	.cont {
		width: 402rpx;
		margin: 0 auto;

		.contList {
			display: flex;
			align-items: center;
			margin-bottom: 15rpx;

			.listPic {
				width: 32rpx;
				height: 32rpx;
			}

			.input {
				width: 330rpx;
				height: 28rpx;
				border: 1px solid #ccc;
				border-radius: 4px;
				background: #F3F3F3;
				padding: 10rpx;
				margin-left: 15rpx;
			}

			.listCont {
				width: 352rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-left: 15rpx;

				.input1 {
					width: 114rpx;
					height: 18rpx;
					padding: 10rpx;
					border: 1px solid #ccc;
					border-radius: 8rpx;
					background: #F3F3F3;
				}

				.code {
					width: 139rpx;
					height: 43rpx;
					border: 1px solid #ccc;
					border-radius: 8rpx;
					text-align: center;

					image {
						width: 90%;
						height: 90%;
					}
				}
			}
		}
	}

	.btn {
		width: 402rpx;
		height: 60rpx;
		border-radius: 8rpx;
		background: linear-gradient(91deg, #1890FF 11.71%, #137EE2 106.47%);
		color: #FFF;
		text-align: center;
		font-family: PingFang SC;
		font-size: 24rpx;
		font-style: normal;
		font-weight: 400;
		line-height: 60rpx;
		margin-top: 25rpx;
	}

	.btn:active {
		background: #2468a2;
	}
</style>